<template>
  <eb-page>
    <eb-navbar large largeTransparent :title="title" eb-back-link="Back">
      <f7-nav-right>
        <eb-link v-if="ready" ref="buttonSubmit" iconMaterial="save" :onPerform="onPerformSave"></eb-link>
      </f7-nav-right>
    </eb-navbar>
    <eb-validate ref="validate" auto :data="data" :params="validateParams" :onPerform="onPerformValidate" @submit="onFormSubmit"> </eb-validate>
  </eb-page>
</template>
<script>
import Vue from 'vue';
const ebModules = Vue.prototype.$meta.module.get('a-base').options.mixins.ebModules;
export default {
  mixins: [ebModules],
  data() {
    return {
      scene: this.$f7route.params.scene,
      module: this.$f7route.query.module,
      data: null,
      validateParams: null,
    };
  },
  computed: {
    ready() {
      return this.data && this.validateParams;
    },
    title() {
      const module = this.getModule(this.module);
      return module ? module.titleLocale : '';
    },
  },
  methods: {
    onFormSubmit() {
      this.$refs.buttonSubmit.onClick();
    },
    onPerformValidate() {
      return this.$api
        .post(`settings/${this.scene}/save`, {
          module: this.module,
          data: this.data,
        })
        .then(() => {
          return true; // toast on success
        });
    },
    onPerformSave(event) {
      return this.$refs.validate.perform(event);
    },
  },
  created() {
    this.$api
      .post(`settings/${this.scene}/load`, {
        module: this.module,
      })
      .then(data => {
        this.data = data.data;
        this.validateParams = {
          module: data.module,
          validator: data.validator,
        };
      });
  },
};
</script>
<style scoped></style>
